<template>
  <div class="app-container">
    <div>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24" :lg="24">
          <div class="bgwhite plr20 ptb20 radius10 flex-col">
            <div class="justify-between w100p">
              <div class="clr3c4 bold ft26">編輯</div>
              <div class="clr9fa align-center pointer" @click="back()">
                <el-icon>
                  <Back />
                </el-icon>
                返回上一頁
              </div>
            </div>
            <div class="mt40">
              <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign.realInfo" style="max-width: 600px">
                <el-form-item label="ID:">
                  <el-input v-model="formLabelAlign.realInfo.id" disabled style="width: 380px;" placeholder="請輸入用戶名" />
                </el-form-item>
                <el-form-item label="用戶訊息:">
                  <el-input v-model="formLabelAlign.realInfo.uid" disabled style="width: 380px;" placeholder="請輸入用戶名" />
                </el-form-item>
                <el-form-item label="真實姓名:">
                  <el-input v-model="formLabelAlign.realInfo.realname" disabled style="width: 380px;" placeholder="請輸入用戶名" />
                </el-form-item>
                <el-form-item label="身份證號:">
                  <el-input v-model="formLabelAlign.realInfo.id_card" disabled style="width: 380px;" placeholder="請輸入用戶名" />
                </el-form-item>
                <el-form-item label="手機號:">
                  <el-input v-model="formLabelAlign.realInfo.mobile" disabled style="width: 380px;" placeholder="請輸入用戶名" />
                </el-form-item>
                <el-form-item label="證件照正面:" style="font-weight: bold;align-items:flex-start;">
                  <el-image style="width: 250px; height: 150px" :preview-src-list="[formLabelAlign.realInfo.front_view]" :src="formLabelAlign.realInfo.front_view" fit="cover" />
                </el-form-item>
                <el-form-item label="證件照反面" style="font-weight: bold;align-items:flex-start;">
                  <el-image style="width: 250px; height: 150px" :preview-src-list="[formLabelAlign.realInfo.back_view]" :src="formLabelAlign.realInfo.back_view" fit="cover" />
                </el-form-item>
                <el-form-item label="手持身份證照片:" style="font-weight: bold;align-items:flex-start;">
                  <el-image style="width: 250px; height: 150px" :preview-src-list="[formLabelAlign.realInfo.hand_view]" :src="formLabelAlign.realInfo.hand_view" fit="cover" />
                </el-form-item>
                <el-form-item label="創建時間:">
                  <el-input v-model="formLabelAlign.realInfo.created_at" disabled style="width: 380px;" placeholder="請輸入用戶名" />
                </el-form-item>
                <el-form-item label="更新時間:">
                  <el-input v-model="formLabelAlign.realInfo.updated_at" disabled style="width: 380px;" placeholder="請輸入用戶名" />
                </el-form-item>
                <el-form-item label="審核:">
                  <el-radio-group v-model="formLabelAlign.radio" class="ml-4">
                    <el-radio value="1" size="large">通過</el-radio>
                    <el-radio value="2" size="large">拒絕</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="拒絕原因:" v-if="formLabelAlign.radio == 2">
                  <el-input v-model="formLabelAlign.realInfo.fail_reason" style="width: 380px;" placeholder="請輸入拒绝原因" />
                </el-form-item>
              </el-form>
              <div class="mt40 mb15 flex-cen ">
                <div class="align-center">
                  <el-button class="btn1" @click="reset()">重置</el-button>
                  <el-button class="btn2" @click="submit()">提交</el-button>
                </div>

              </div>
            </div>


          </div>
        </el-col>


      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import type { FormProps } from 'element-plus'
import { realnameEdit } from '@/api/usersManage'
onMounted(() => {
  console.log('编辑实名', route.query)
  formLabelAlign.realInfo = route.query
  formLabelAlign.radio = `${route.query.state}`
})
const labelPosition = ref<FormProps['labelPosition']>('right')
const route = useRoute()

const formLabelAlign = reactive({
  realInfo: {},
  radio: '1'
})
const router = useRouter()
const back = () => {
  router.back()
}
const reset = () => {
  formLabelAlign.radio = '1'
  formLabelAlign.realInfo.fail_reason = ''
}
const submit = () => {
  realnameEdit({
    id: formLabelAlign.realInfo.id,
    state: formLabelAlign.radio,
    fail_reason: formLabelAlign.radio == '2' ? formLabelAlign.realInfo.fail_reason : ''
  }).then((res) => {
    console.log('编辑实名成功', res)
    back()
  })
}
</script>
<style scoped >
:deep(.el-upload--picture-card) {
  background-color: transparent;
  border: none;
}

:deep(.el-input) {
  box-shadow: none;
}

:deep(.el-input) {
  --el-input-focus-border-color: #dcdfe6;
  --el-input-hover-border-color: #dcdfe6;
  --el-input-focus-border: transparent;
}
</style>